<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="openBtn">打开文件</button>
    <button id="saveBtn">保存文件</button>
    <button id="messageBtn">弹出对话框</button>
    <img id="images"  style="width:100%" />
</body>

<script>
    const {dialog} = require('electron').remote
    const fs = require('fs')
    var openBtn = document.getElementById('openBtn');
    openBtn.onclick = function(){
        dialog.showOpenDialog({
            title:'请选择你喜欢的小姐姐照片',
            defaultPath: '1.jpg',
            filters:[
                {name:'img',extensions:['jpg']}
            ],
            buttonLabel: '打开小姐姐'
        }).then(result=>{
            console.log('result: ', result)
            let image = document.getElementById('images')
            image.setAttribute("src",result.filePaths[0]);
        }).catch(err=>{
            console.log(err)
        })
    }

    var saveBtn = document.getElementById('saveBtn')
    saveBtn.onclick = function(){
        dialog.showSaveDialog({
            title:'保存文件',
        }).then(result=>{
            console.log('save: ',result)
            fs.writeFileSync(result.filePath,'柯文一个前端爱好者')
        }).catch(err=>{
            console.log(err)
        })
    }

    var messageBtn = document.getElementById('messageBtn')
    messageBtn.onclick = function(){
        dialog.showMessageBox({
            type:'warning',
            title:'去不去由你',
            message:'是不是要要上班?',
            buttons:['我要去','不去了', '算了吧']
        }).then(result=>{
            console.log(result)
        })
    }

</script>

</html>